

body {
    font-family: Arial;
    padding: 10px;
    height:100%;
    background-color:#f1f1f1; /* 浏览器不支持时显示 */
    background-image: linear-gradient(#6495ED, #f1f1f1);
    background-position: top;
    background-repeat:no-repeat;
}

/* 头部标题 */
.header {
    padding: 15px;
    text-align: left;
    font-family:"Times New Roman",Times,serif;
}

.header h1 {
    font-size: 30px;
    color: white;
    text-align: left;
    font-family:"Times New Roman",Times,serif;
}
.header h2 {
    font-size: 15px;
    color: white;
    text-align: left;
}

.img {
    margin: 8px;
    border: 1px solid;
    border-style:outset;
    float:left;
    width: 25%;
}

.img img {
    width: 100%;
    height: auto;
}

.img {
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
    overflow:hidden;
}

.desc {
    padding: 1px;
    font-size: 15px;
    text-align: center;
}

.circle {
    width: 30px;
    height: 30px;
    border: 1px solid white;
    border-radius:50%;
    background-color: #ed64af;
    color:white;
    font-size: 15px;
    text-align: center;
}

.fade-in-words{
    width:100%;
    margin: 0 auto;
    text-align: left;
}

/*自定义一个透明度从0到1的动画，它的名称是fade-in*/
@keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-webkit-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-ms-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-o-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
@-moz-keyframes fade-in{
    0%{ opacity: 0;}
    100%{opacity:1;}
}
.first-words{
    opacity: 0;      /*实先规定文字的状态是不显示的*/
    animation: fade-in 4s ease 0s 1;    /*调用名称为fade-in的动画，全程动画显示时间4S，进入方式为ease，延时0S进入，播放次数1次*/
    -webkit-animation: fade-in 4s ease 0s 1;
    -moz-animation: fade-in 4s ease 0s 1;
    -o-animation: fade-in 4s ease 0s 1;
    -ms-animation: fade-in 4s ease 0s 1;

    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;
      -o-animation-fill-mode: forwards;
      -ms-animation-fill-mode: forwards;
      -moz-animation-fill-mode: forwards;
}
.second-words{
    opacity: 0;
    animation: fade-in 4s ease 2s 1;
    -webkit-animation: fade-in 4s ease 2s 1;
    -moz-animation: fade-in 4s ease 2s 1;
    -o-animation: fade-in 4s ease 2s 1;
    -ms-animation: fade-in 4s ease 2s 1;

    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;
      -o-animation-fill-mode: forwards;
      -ms-animation-fill-mode: forwards;
      -moz-animation-fill-mode: forwards;
}
